<template>
  <div class="">
    <!-- app-container -->
    <div class="head">
      <el-form :model="queryParams" ref="queryForm" :inline="true" :label-width="labelWidth">
        <el-form-item label="订单编号：" prop="">
          <el-input v-model="queryParams.orderNo" placeholder="请输入" clearable :style="{width: inputWidth}" />
        </el-form-item>
        <el-form-item label="物流单号：" prop="">
          <el-input v-model="queryParams.logisticsNo" placeholder="请输入" clearable :style="{width: inputWidth}" />
        </el-form-item>
        <el-form-item label="活动名称：" prop="">
          <el-input v-model="queryParams.punchActivityName" placeholder="请输入" clearable :style="{width: inputWidth}" />
        </el-form-item>
        <el-form-item label="产品名称：" prop="">
          <el-input v-model="queryParams.commodityName" placeholder="请输入" clearable :style="{width: inputWidth}" />
        </el-form-item>
        <el-form-item label="会员查询：" prop="">
          <el-input v-model="queryParams.query" placeholder="姓名\手机号" clearable :style="{width: inputWidth}" />
        </el-form-item>
        <el-form-item label="产品状态：" prop="">
          <el-select v-model="queryParams.status" placeholder="请选择" filterable clearable :style="{width: inputWidth}">
            <el-option v-for="dict in logisticsStatus" :key="dict.id" :label="dict.value" :value="dict.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="购买店铺：" prop="">
          <el-select v-model="queryParams.shopId" placeholder="请选择" filterable clearable :style="{width: inputWidth}">
            <el-option v-for="dict in shopList" :key="dict.id" :label="dict.value" :value="dict.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="使用时间：" prop="">
          <el-date-picker v-model="date" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
            start-placeholder="开始时间" end-placeholder="结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="发货时间：" prop="">
          <el-date-picker v-model="dateTwo" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
            start-placeholder="开始时间" end-placeholder="结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="listBox">
      <el-table v-loading="loading" :data="tabList" stripe border>
        <el-table-column label="序号" align="center" type="index" width="64px" />
        <el-table-column label="订单编号" align="center" prop="orderNo" />
        <el-table-column label="活动名称" align="center" prop="punchActivityName" />
        <el-table-column label="姓名" align="center" prop="customerName" />
        <el-table-column label="手机号" align="center" prop="customerPhone" width="108" />
        <el-table-column label="产品名称" align="center" prop="commodityName" />
        <el-table-column label="有效期" align="center" prop="" width="130">
          <template slot-scope="scope">
            <span>{{scope.row.validityStartTime}}</span>~
            <span>{{scope.row.validityEndTime}}</span>
          </template>
        </el-table-column>
        <el-table-column label="产品状态" align="center" prop="status" :show-overflow-tooltip="true" width="120px">
          <template slot-scope="scope">
            <dict-tag :options="logisticsStatus" :value="scope.row.status" />
          </template>
        </el-table-column>
        <el-table-column label="购买店铺" align="center" prop="shopName" />
        <el-table-column label="使用时间" align="center" prop="useTime" width="100" />
        <el-table-column label="发货时间" align="center" prop="sendTime" width="100" />
        <el-table-column label="物流单号" align="center" prop="logisticsNo" width="100" />
        <el-table-column label="地址" align="center" prop="deliverInfo" width="190" />
        <el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="text" v-if="scope.row.status==2||scope.row.status==4"
              @click="openLogisticsSend(scope.row)">发货
            </el-button>
            <el-button size="mini" type="text" v-else-if="scope.row.status==3" @click="openLogisticsSend(scope.row)">
              修改单号</el-button>
            <span v-else>-</span>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />

      <!-- 发货操作 -->
      <el-dialog title="提示" :visible.sync="dialogVisible" width="600px" :close-on-click-modal="false">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" :label-width="labelWidthTwo" v-loading="loading">
          <el-form-item label="运单号" prop="logisticsNo">
            <el-input v-model="ruleForm.logisticsNo" placeholder="请输入" :style="{width: inputWidthTwo}">
            </el-input>
          </el-form-item>
          <el-form-item label="联系人" prop="contact" v-if="status==4">
            <el-input v-model="ruleForm.contact" placeholder="请输入" :style="{width: inputWidthTwo}">
            </el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone" v-if="status==4">
            <el-input v-model="ruleForm.phone" placeholder="请输入" :style="{width: inputWidthTwo}">
            </el-input>
          </el-form-item>
          <el-form-item label="联系地址" prop="address" v-if="status==4">
            <el-input v-model="ruleForm.address" placeholder="请输入" :style="{width: inputWidthTwo}">
            </el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')" :loading="sumitLoading">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import {
    logisticsLs,
    shopSelect,
    logisticsSend,
    logisticsNo,
  } from "@/api/consumeMiningManagement/logisticsDetail";
  export default {
    // dicts: ['equity_card_issue_type', 'equity_card_sell_status'],
    name: "",
    components: {

    },
    data() {
      return {
        labelWidth: '120px',
        inputWidth: '200px',
        labelWidthTwo: '80px',
        inputWidthTwo: '400px',
        sumitLoading: false,
        //日期
        date: [],
        dateTwo: [],
        // 遮罩层
        loading: false,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 表格数据
        tabList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          commodityName: '', //商品名称
          orderNo: '', //订单编号
          logisticsNo:'',//物流单号
          punchActivityName: '', //活动名称
          query: '', //姓名/手机号	
          sendEndTime: '', //发货结束时间
          sendStartTime: '', //发货开始时间
          shopId: '', //店铺id
          status: '', //产品状态 shenye_punch_activity_logistics_status
          useEndTime: '', //使用结束时间
          useStartTime: '', //使用开始时间
        },
        logisticsStatus: [], //产品状态下拉
        shopList: [], //店铺下拉
        dialogVisible: false, //发货弹窗
        ruleForm: {
          address: '', //联系地址
          contact: '', //联系人 20个字符
          id: '', //主键id
          logisticsNo: '', //物流单号 100个字符
          phone: '', //手机号 20个字符
        },
        rules: {
          logisticsNo: [{
            required: true,
            message: "请输入运单号",
            trigger: ['blur', 'change'],
          }],
          contact: [{
            required: true,
            message: "请输入联系人",
            trigger: ['blur', 'change'],
          }],
          phone: [{
            required: true,
            message: "请输入手机号",
            trigger: ['blur', 'change'],
          }],
          address: [{
            required: true,
            message: "请输入联系地址",
            trigger: ['blur', 'change'],
          }],
        },
        status: '', //发货状态
      };
    },
    computed: {
      ExportParams() {
        const params = {
          ...this.queryParams,
        };
        return params;
      },
    },
    created() {
      this.getDictList();
      this.getShopSelect();
      this.getList();
    },
    methods: {
      //获取订单状态字典
      getDictList() {
        var dictType = "shenye_punch_activity_logistics_status";
        this.$getSelectList(dictType)
          .then((res) => {
            var arr = [{
              id: "",
              value: "全部",
            }, ];
            this.logisticsStatus = arr.concat(res.result[0].dictList);
          })
          .finally(() => {
            this.loading = false;
          });
      },
      //获取店铺下拉
      getShopSelect() {
        let data = {
          shopName: '',
          type: '2', //查询类型 空为全部 1 为开通资金板块 2 为开通神椰 3 为开通nfr
        }
        shopSelect(data).then(response => {
          this.shopList = response.result
        });
      },
      /** 查询列表 */
      getList() {
        this.loading = true;
        logisticsLs(this.queryParams).then(response => {
          this.tabList = response.result.records;
          this.total = response.result.total;
          this.loading = false;
        });
      },
      // 表单重置
      resetQuery() {
        this.date = []
        this.dateTwo = []
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          commodityName: '', //商品名称
          orderNo: '', //订单编号
          logisticsNo:'',//物流单号
          punchActivityName: '', //活动名称
          query: '', //姓名/手机号	
          sendEndTime: '', //发货结束时间
          sendStartTime: '', //发货开始时间
          shopId: '', //店铺id
          status: '', //产品状态 shenye_punch_activity_logistics_status
          useEndTime: '', //使用结束时间
          useStartTime: '', //使用开始时间
        }
        // this.resetForm("form");
        this.getList();
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.useStartTime = this.date[0];
        this.queryParams.useEndTime = this.date[1];
        this.queryParams.sendStartTime = this.dateTwo[0];
        this.queryParams.sendEndTime = this.dateTwo[1];
        this.queryParams.pageNum = 1;
        this.getList();
      },
      //操作按钮
      openLogisticsSend(row) {
        this.ruleForm.logisticsNo = null
        this.ruleForm.address = ''
        this.ruleForm.contact = ''
        this.ruleForm.phone = ''
        
        this.status = row.status
        this.ruleForm.id = row.id
        this.dialogVisible = true
        setTimeout(()=>{
            this.$refs['ruleForm'].resetFields();
        },100)
      },
      /** 发货提交按钮 */
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.sumitLoading = true
            if (this.status == 2||this.status == 4) { //待发货\过期状态
              logisticsSend(this.ruleForm).then(response => {
                this.$message.success('操作成功');
                this.dialogVisible = false
                this.sumitLoading = false
                this.getList()
              }).catch(() => {
                this.sumitLoading = false
              });
            }else{
                logisticsNo(this.ruleForm).then(response => {
                this.$message.success('操作成功');
                this.dialogVisible = false
                this.sumitLoading = false
                this.getList()
              }).catch(() => {
                this.sumitLoading = false
              });
            }

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    }
  };

</script>
<style scoped>
  .head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px 0;
  }

  .listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px;
    margin-top: 10px;
  }

  .listBox_head {
    width: 100%;
    padding-bottom: 20px;
  }

  .num_detail {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    border: 1px solid #dfe6ec;
    border-radius: 10px;
    padding: 20px 10px 0;
    margin-bottom: 20px;
  }

  .num_detail_box {
    color: #333;
    font-size: 15px;
    margin-right: 30px;
    margin-bottom: 20px;
  }

</style>
